<template>
  <!-- 设置提醒周期弹窗 -->
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="1000px"
      class="assetAlertDialogBox"
      :show-close="false"
      center
      :close-on-click-modal="false"
    >
      <template #header="{ close }">
        <div class="dialogHeadBox">
          <div class="title">空闲资产提醒</div>
          <div class="title">即将到期资产提醒</div>
          <img
            class="closeBtnBox f-r"
            src="@/assets/iconImg/close.png"
            alt=""
            @click="close"
          />
        </div>
      </template>
      <div class="dialogCnBox">
        <div class="leftBox">
          <el-form
            :inline="true"
            ref="leftFormRef"
            :model="leftForm"
            :rules="leftFormRules"
            class="demo-form-inline"
          >
            <el-form-item label="空闲第" label-width="130px" prop="idleAssetsDay">
              <el-input
                v-model="leftForm.idleAssetsDay"
                style="width: 88px; margin-right: 12px"
                @input="
                  leftForm.idleAssetsDay = limitInputNum(
                    leftForm.idleAssetsDay,
                    4,
                    0,
                    false
                  )
                "
              />
              天开始提醒
            </el-form-item>
            <el-form-item
              label="每"
              label-width="130px"
              prop="idleAssetsIntervalDay"
            >
              <el-input
                v-model="leftForm.idleAssetsIntervalDay"
                style="width: 88px; margin-right: 12px"
                @input="
                  leftForm.idleAssetsIntervalDay = limitInputNum(
                    leftForm.idleAssetsIntervalDay,
                    4,
                    0,
                    false
                  )
                "
              />
              天提醒一次
            </el-form-item>
            <el-form-item
              label=" "
              style="width: 100%"
              prop="idleAssetsRemindContent"
            >
              <el-input
                type="textarea"
                v-model="leftForm.idleAssetsRemindContent"
                clearable
                :autosize="{ minRows: 5, maxRows: 5 }"
                maxlength="50"
                show-word-limit
                placeholder="请输入提醒内容 (50子以内)"
              />
            </el-form-item>
          </el-form>
        </div>
        <el-divider
          direction="vertical"
          style="height: 245px; margin: 0px 75px 0 68px"
        />
        <div class="rightBox">
          <el-form
            :inline="true"
            ref="rightFormRef"
            :model="rightForm"
            :rules="rightFormRules"
            class="demo-form-inline"
          >
            <el-form-item
              label="距离到期第"
              label-width="110px"
              prop="dueSoonAssetsDay"
            >
              <el-input
                v-model="rightForm.dueSoonAssetsDay"
                style="width: 88px; margin-right: 12px"
                @input="
                  rightForm.dueSoonAssetsDay = limitInputNum(
                    rightForm.dueSoonAssetsDay,
                    4,
                    0,
                    false
                  )
                "
              />
              天开始提醒
            </el-form-item>
            <el-form-item
              label="每"
              label-width="110px"
              prop="dueSoonAssetsIntervalDay"
            >
              <el-input
                v-model="rightForm.dueSoonAssetsIntervalDay"
                style="width: 88px; margin-right: 12px"
                @input="
                  rightForm.dueSoonAssetsIntervalDay = limitInputNum(
                    rightForm.dueSoonAssetsIntervalDay,
                    4,
                    0,
                    false
                  )
                "
              />
              天提醒一次
            </el-form-item>
            <el-form-item
              label=" "
              style="width: 100%"
              prop="dueSoonAssetsRemindContent"
            >
              <el-input
                type="textarea"
                v-model="rightForm.dueSoonAssetsRemindContent"
                :autosize="{ minRows: 5, maxRows: 5 }"
                maxlength="50"
                show-word-limit
                placeholder="请输入提醒内容 (50子以内)"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            size="small"
            plain
            color="#666"
            style="width: 76px"
            @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button
            size="small"
            color="#FF7B50"
            style="width: 76px; color: #fff"
            type="primary"
            @click="submitDialog"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  ElForm,
  ElFormItem,
  ElDivider,
  ElMessage,
  ElDialog,
} from "element-plus";
import { limitInputNum } from "@/common/utils/GlobalUtils";
import { assetFilesApi } from "@/api/assets";

const dialogVisible = ref(false);
const leftForm = reactive({
  idleAssetsDay: "",
  idleAssetsIntervalDay: "",
  idleAssetsRemindContent: "",
});
const leftFormRules = reactive({
  idleAssetsDay: [
    { required: true, message: "请填写空闲天数", trigger: "blur" },
  ],
  idleAssetsIntervalDay: [
    { required: true, message: "请填写提醒间隔天数", trigger: "blur" },
  ],
  idleAssetsRemindContent: [
    { required: true, message: "请填写提醒内容", trigger: "blur" },
  ],
});
const rightForm = reactive({
  dueSoonAssetsDay: "",
  dueSoonAssetsIntervalDay: "",
  dueSoonAssetsRemindContent: "",
});
const rightFormRules = reactive({
  dueSoonAssetsDay: [
    { required: true, message: "请填写距离到期天数", trigger: "blur" },
  ],
  dueSoonAssetsIntervalDay: [
    { required: true, message: "请填写提醒间隔天数", trigger: "blur" },
  ],
  dueSoonAssetsRemindContent: [
    { required: true, message: "请填写提醒内容", trigger: "blur" },
  ],
});

const initInfo = () => {
  assetFilesApi.getAlertInfo().then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data) {
        leftForm.idleAssetsDay = idleAssetsDay;
        leftForm.idleAssetsIntervalDay = idleAssetsIntervalDay;
        leftForm.idleAssetsRemindContent = idleAssetsRemindContent;
        rightForm.dueSoonAssetsDay = dueSoonAssetsDay;
        rightForm.dueSoonAssetsIntervalDay = dueSoonAssetsIntervalDay;
        rightForm.dueSoonAssetsRemindContent = dueSoonAssetsRemindContent;
      }
    }
  });
};

const isEmpty = (formValue) => {
  let total = 0;
  for (let value in formValue) {
    if (formValue[value] === "") {
      total++;
    }
  }
  return total === Object.getOwnPropertyNames(formValue).length ? true : false;
};

const leftFormRef = ref(null);
const rightFormRef = ref(null);
const submitDialog = () => {
  let params = {
    ...leftForm,
    ...rightForm,
  };
  let bool = true;
  if (isEmpty(leftForm) && isEmpty(rightForm)) {
    // 两边form都为空
    ElMessage.warning("空闲资产提醒或即将到期资产提醒不能为空!");
    return;
  }
  if (!isEmpty(leftForm) && isEmpty(rightForm)) {
    // 左边有值,右边空
    leftFormRef.value.validate((valid, fields) => {
      if (valid) {
        console.log("submit!");
      } else {
        bool = false;
        console.log("error submit!", fields);
      }
    });
  }
  if (isEmpty(leftForm) && !isEmpty(rightForm)) {
    // 左边空,右边空有值
    rightFormRef.value.validate((valid, fields) => {
      if (valid) {
        console.log("submit!");
      } else {
        bool = false;
        console.log("error submit!", fields);
      }
    });
  }
  if (!isEmpty(leftForm) && !isEmpty(rightForm)) {
    // 两边都有值
    leftFormRef.value.validate((valid, fields) => {
      if (valid) {
        console.log("submit!");
      } else {
        bool = false;
        console.log("error submit!", fields);
      }
    });
    rightFormRef.value.validate((valid, fields) => {
      if (valid) {
        console.log("submit!");
      } else {
        bool = false;
        console.log("error submit!", fields);
      }
    });
  }
  setTimeout(()=>{
    if(bool){
      assetFilesApi.saveAlertInfo(params).then((res) => {
          const { code, data, msg } = res;
          if (code == 200) {
           ElMessage.success('设置成功');
           setTimeout(() => {
             dialogVisible.value = false;
           }, 1000);
          }
      });
    }
  },600);
};

const openDialog = () => {
  initInfo();
  dialogVisible.value = true;
};
defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
:deep(.assetAlertDialogBox) {
  .dialogHeadBox {
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      font-size: 16px;
      font-family: SourceHanSansMedium;
      font-weight: 500;
      color: #1a1a1a;
    }
    .closeBtnBox {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }
  .dialogCnBox {
    display: flex;
    .leftBox {
      flex: 1;
      padding: 0 0 0 40px;
    }
    .rightBox {
      flex: 1;
      padding: 0 40px 0 0;
    }
    .el-textarea {
      .el-textarea__inner {
        max-height: 72px !important;
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 32px;
  }
}
</style>
